<template>
	<gui-page :fullPage="true" :isLoading="false" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns" style="background-color:#F8F8F8;">
			<!-- 分类导航 -->
			<view class="headerTap gui-border-box" id="myheader">
				<view class="top-content">
					<view class="info flex">
						<view class="left flex-dc">
							<image class="logo" src="../../static/logo.png" mode="heightFix"></image>
							<text class="cfff gui-bold" style="position: relative;top: 0rpx;">校园智能化用餐系统</text>
						</view>
						<view class="right" @tap="loginOut">
							<text class="gui-icons f50 gui-bold cfff">&#xe62e;</text>
						</view>
					</view>
					<view class="wave wave1"> </view>
					<view class="wave wave2"> </view>
					<view class="wave wave3"> </view>
					<view class="wave wave4"> </view>
				</view>
				<!-- <gui-switch-navigation :size="250" :currentIndex="currentIndex" fontSize="24rpx" activeFontSize="24rpx"
					activeLineBg="linear-gradient(90deg, #44b360, #90bc6a)" activeColor="#44b360" activeLineWidth="56rpx" activeDirection="center" textAlign="center"
					:isCenter="true" activeLineRadius="10rpx" :items="tabs"
					@change="navchange"></gui-switch-navigation> -->
				<view class="search flex-ac">
					<gui-search @inputting="inputting" @confirm="searchNow" @clear="clearSearch" borderRadius="10rpx"
						class="flex1"></gui-search>
					<view class="saveBtn" @tap="searchNow">搜索</view>
				</view>
			</view>
			<swiper disable-touch :current="currentIndex" @change="swiperChange"
				:style="{height:mainHeight+'px', width:'750rpx'}">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item v-for="(items, orderIndex) in orders" :key="orderIndex">
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :scroll-y="true" :scroll-top="scrollTops[currentIndex]"
						:style="{height:mainHeight+'px'}" @touchstart="touchstart" @touchmove="touchmove"
						@touchend="touchend" @scrolltolower="loadmorefun" @scroll="scroll">
						<!-- 刷新组件 -->
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<gui-empty v-if="noData[currentIndex]&&currentIndex==orderIndex">
							<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
								<!-- 请根据您的项目要求制作并更换为空图片 -->
								<image class="gui-empty-img" src="../../static/noImg.png" mode="widthFix"></image>
							</view>
							<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top"
								style="color:#9DABFF;">暂无数据</text>
						</gui-empty>
						<!-- 数据展示区域 -->
						<view class="order">
							<view class="order-item bgfff radius10" v-for="(item,oIndex) in orders[orderIndex]"
								:key="item.id">
								<view class="item flex-ac-jb">
									<text>商品名称：</text>
									<text>{{item.typeName?item.typeName:'-'}}</text>
								</view>
								<view class="item flex-ac-jb">
									<text>单位：</text>
									<text>{{item.brandName?item.brandName:'-'}}</text>
								</view>
								<view class="item flex-ac-jb">
									<text>规格：</text>
									<text>{{item.specName?item.specName:'-'}}</text>
								</view>
								<view class="item flex-ac-jb">
									<text>编码：</text>
									<text>{{item.deliveryId?item.deliveryId:'-'}}</text>
								</view>
								<view class="item flex-ac-jb">
									<text>供应商：</text>
									<text>{{item.companyName?item.companyName:'-'}}</text>
								</view>
								<view class="item flex-ac-jb">
									<text>应到数量：</text>
									<text>{{item.num}}</text>
								</view>
								<view class="item flex-ac-jb">
									<text>配送日期：</text>
									<text>{{item.sendTime}}</text>
								</view>
								<view class="btn flex-ac-je">
									<view class="saveBtn" @tap="nowSubmit(item,1)" style="margin-right: 25rpx;">
										确认
									</view>
									<view class="saveBtn" @tap="openSumbit(item,2)">
										确认验收
									</view>
								</view>
								<!--<view class="item flex-ac-jb" v-if="currentIndex==1&&oIndex==0">
									<text>验收数量：</text>
									<text class="primary-color2">{{item.num-2}}</text>
								</view>
								<view class="item flex-ac-jb" v-if="currentIndex==1&&oIndex==1">
									<text>验收数量：</text>
									<text>{{item.num}}</text>
								</view>
								 <view class="btn flex-ac-je" v-if="currentIndex==0">
									<view class="saveBtn" @tap="openSumbit(item.id)">
										确认验收
									</view>
								</view>
								<view class="btn flex-ac-je" v-if="currentIndex==1&&oIndex==0">
									<text class="primary-color2">审核中</text>
								</view>
								<view class="btn flex-ac-je" v-if="currentIndex==1&&oIndex==1">
									<text class="primary-color">已验收</text>
								</view> -->
							</view>
						</view>
						<!-- 加载组件 -->
						<gui-loadmore ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
			<!-- 居中弹出 -->
			<gui-popup ref="guipopup1" width="452rpx" :duration="200" :zIndex="9">
				<view class="box_star flex-dc-ac-jc gui-relative gui-box-shadow">
					<view class="close gui-icons flex-ac-jc c999" @tap="closeSumbit">
						&#xe7a5;
					</view>
					<view class="flex-dc-ac-jc">
						<text>是否确认验收订单</text>
						<input class="input-num gui-text-center" v-model="realNum" type="number" placeholder="请输入实际验收数量"
							placeholder-class="plStyle" />
					</view>
					<view class="saveBtn" @tap="submitStar">
						确认完成
					</view>
				</view>
			</gui-popup>
		</view>
	</gui-page>
</template>
<script>
	var graceJs = require('@/GraceUI5/js/grace.js');
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				pageLoading: true,
				// 选项卡标签
				tabs: [],
				// 选中选项的 索引
				currentIndex: 0,
				// 核心区域高度 
				mainHeight: 200,
				// 订单信息保存数组
				orders: [],
				// 每个选项卡对应的分页
				pages: [],
				pageSize: 10,
				totalPage: 0,
				// 每个选项卡内部的滚动区域滚动值
				scrollTops: [],
				// 滚动延迟
				scrollTimer: null,
				// 加载更多延迟
				loadMoreTimer: null,
				// api 加载状态记录
				apiLoadStatus: [],
				noData: [],
				sumbitObj: {},
				realNum: '',
				searchKey: '',
				status:1
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad: function() {
			// 01. 获取页面主体高度
			graceJs.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 主体高度 = 页面高度 - 自定义区域高度
					graceJs.select('#myheader', (e2) => {
						// 如果自定义区域有 margin 尺寸获取不到请加上这个值，可以利用 uni.upx2px() 转换
						this.mainHeight = e.height - e2.height;
						// 模拟 api 加载新闻分类
						// 实际开发时此处改成 api 请求即可
						//订单状态 -1已取消 0待支付 1待接单 2已接单 3已出发 4已完成待评价 5已完成 6待处理
						// this.tabs = [{
						// 	value: '',
						// 	name: '未验收'
						// }, {
						// 	value: '1',
						// 	name: '验收记录'
						// }];
						// 初始化新闻列表数组 元素数量与分类匹配
						for (var i = 0; i < 1; i++) {
							this.orders.push([]);
							this.pages.push(1);
							this.scrollTops.push(0);
							this.apiLoadStatus.push(false);
							this.noData.push(false);
						}
						// 第一次加载数据
						this.getOrders();
					});
				});
			});
		},
		watch: {
			currentIndex: function(nVal, oldVal) {
				if (this.orders[nVal] == null) {
					return;
				}
				if (this.orders[nVal].length < 1) {
					this.getOrders();
				}
			}
		},
		methods: {
			inputting(e) {
				console.log('进来了');
				this.searchKey = e
				if (!e) {
					this.clearSearch()
				}
			},
			searchNow() {
				this.pages[this.currentIndex] = 1
				this.getOrders()
			},
			clearSearch() {
				this.searchKey = ''
				this.searchNow()
			},
			loginOut() {
				this.$u.showModal('温馨提示', '确认退出登陆吗？', res => {
					if (res) {
						uni.removeStorage({
							key: 'token'
						})
						// uni.removeStorage({
						// 	key: 'refresh_token'
						// })
						this.$u.to('/pages/login/login', 'reLaunch')
					}
				})
			},
			openSumbit(item,status) {
				this.status = status
				this.sumbitObj = item
				this.$refs.guipopup1.open();
			},
			closeSumbit() {
				this.sumbitObj = {}
				this.$refs.guipopup1.close();
			},
			nowSubmit(item) {
				this.$u.showModal('温馨提示', '确认验收全部吗?', (res) => {
					if (res) {
						this.sumbitObj = item
						this.realNum = item.num
						this.submitStar(item)
					}
				})
			},
			submitStar() {
				if (!this.realNum) return this.$u.msg('请输入验收数量！')
				const {
					id,
					type_id,
					spec_id,
					brand_id,
					num
				} = this.sumbitObj
				let formData = {
					id:this.sumbitObj.id,
					schoolId:this.sumbitObj.schoolId,
					deliveryId:this.sumbitObj.deliveryId,
					typeId:this.sumbitObj.typeId,
					specId:this.sumbitObj.specId,
					brandId:this.sumbitObj.brandId,
					num:this.sumbitObj.num,
					shouNum:this.realNum,
					logId:this.sumbitObj.logId,
					doseId:this.sumbitObj.doseId,
					status:this.status
					// '0': {
					// 	type_id,
					// 	spec_id,
					// 	brand_id,
					// 	num,
					// 	real_num: Number(this.realNum),
					// 	shou_num: Number(this.realNum)
					// }
				}
				// console.log(formData)
				// console.log('formData', formData);
				// return
				// http://localhost:8081
				this.$http.post('/system/check', formData).then(res => {
					let result = res.data
					this.$u.msg('验收成功')
					this.closeSumbit()
					this.clearOrderSattus()
				})
			},
			// cancleOrder(id, oIndex) { //取消订单
			// 	this.$u.showModal('温馨提示', '确认取消订单吗？', (res) => {
			// 		if (res) {
			// 			this.$http.post('/api/serviceOrder/cancel', {
			// 				serviceOrderId: id
			// 			}).then(res => {
			// 				let result = res.data
			// 				console.log('取消', result)
			// 				this.$u.msg('已取消')
			// 				this.clearOrderSattus()

			// 			})
			// 		}
			// 	})
			// },
			clearOrderSattus() { //统一处理订单操作后的情况,原理其余订单重新请求，当前订单删除并且为了全部订单的时候需要重新查询选项卡为0时
				this.pages[this.currentIndex] = 1;
				this.orders[this.currentIndex] = [];
				this.getOrders()
				for (var i = 0; i < this.tabs.length; i++) {
					if (i != 0) {
						this.pages[i] = 1;
						this.orders[i] = [];
					}
				}
			},
			// getStatus(status) {
			// 	//退款的流程 1.正常运行 2.异常运行 3.已停用
			// 	let textStatus = ''
			// 	switch (status) {
			// 		case '1':
			// 			textStatus = '等待商家接单'
			// 			break;
			// 		case '2':
			// 			textStatus = '商家已接单'
			// 			break;
			// 		case '3':
			// 			textStatus = '技师已出发'
			// 			break;
			// 		case '5':
			// 			textStatus = '订单已完成'
			// 			break;
			// 		case '-1':
			// 			textStatus = '订单已取消'
			// 			break;
			// 		default:
			// 			break;
			// 	}
			// 	return textStatus;
			// },
			// 分类切换
			navchange: function(e) {
				this.currentIndex = e;
			},
			// 轮播切换
			swiperChange: function(e) {
				this.currentIndex = e.detail.current;
			},
			// 滚动区域滚动
			scroll: function(e) {
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.scrollTops.splice(this.currentIndex, 1, e.detail.scrollTop);
				}, 100);
			},
			// 下拉刷新相关事件绑定
			touchstart: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchstart(e);
			},
			touchmove: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchmove(e);
			},
			touchend: function(e) {
				if (this.apiLoadStatus[this.currentIndex]) {
					return;
				}
				if (this.scrollTops[this.currentIndex] > 0) {
					return;
				}
				this.$refs.refreshcom[this.currentIndex].touchend(e);
			},
			// 刷新事件
			reload: function() {
				this.pages[this.currentIndex] = 1;
				this.$refs.loadmorecom[this.currentIndex].stoploadmore();
				this.getOrders(1);
			},
			// 加载更多事件
			loadmorefun: function() {
				var currentIndex = this.currentIndex;
				if (this.apiLoadStatus[currentIndex]) {
					return;
				}
				// 获取加载组件状态看一下是否还能继续加载
				if (this.$refs.loadmorecom[currentIndex].loadMoreStatus != 0) {
					return;
				}
				// 保证触底只执行一次加载
				if (this.loadMoreTimer != null) {
					clearTimeout(this.loadMoreTimer);
				}
				this.loadMoreTimer = setTimeout(() => {
					this.$refs.loadmorecom[currentIndex].loading();
					// 此处开启加载动画执行加载数据的函数
					this.getOrders();
				}, 80);
			},
			// 新闻数据读取
			getOrders: function(isReload) {
				var date = new Date()
				console.log(date.getMonth() + 1)
				var da = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()

				console.log(da + " - " + da)
				// 使用内部变量记录 当前索引，避免加载时用户切换引起的变量变化
				let currentIndex = this.currentIndex;
				let url = currentIndex == 0 ? '/system/deliveryDetail/list' : '' //  /school/check/index
				// 更新 api 加载状态
				// http://localhost:8081/system/deliveryDetail/list
				this.apiLoadStatus.splice(currentIndex, 1, true);
				if (this.pages[currentIndex] == 1 && !isReload) {
					this.pageLoading = true;
				}
				// 当前正在展示的 选项index 为 this.currentIndex
				// 那么分类 value 应该为 this.tabs[this.currentIndex].value
				let orderStatus = this.tabs[currentIndex] ? this.tabs[currentIndex].value : ''
				this.$http.get(url, {
					typeName: this.searchKey,
					pageNum: this.pages[currentIndex],
					pageSize: this.pageSize,
					'params[sendTimeStart]': da,
					'params[sendTimeEnd]': da,
					status:0
 				}).then(res => {
					let result = res.rows
					console.log('订单列表', result)
					this.totalPage = Math.ceil(result.total / this.pageSize);
					// 第一页
					if (this.pages[currentIndex] == 1) {
						this.orders.splice(currentIndex, 1, result);
						this.noData[currentIndex] = result.length ? false : true
					}
					// 之后的加载页
					else {
						this.$refs.loadmorecom[currentIndex].stoploadmore();
						if (this.pages[currentIndex] > this.totalPage) {
							this.$refs.loadmorecom[currentIndex].nomore();
						} else {
							this.orders[currentIndex] = this.orders[currentIndex].concat(result);
						}
					}
					if (isReload) {
						this.$refs.refreshcom[currentIndex].endReload();
					}
					this.pages[currentIndex]++;
					// 更新 api 加载状态
					this.apiLoadStatus.splice(currentIndex, 1, false);
					this.pageLoading = false;

				})
			},
		}
	}
</script>
<style lang="less">
	.search {
		padding: 0 30rpx;

		.saveBtn {
			width: 120rpx;
			height: 55rpx;
			border-radius: 10rpx;
			margin-left: 50rpx;
		}
	}

	.logo {
		height: 120rpx;
		animation: scaleB 5s 1s ease-in-out infinite;
	}

	@keyframes scaleB {

		// 0%{
		// 	transform: scale(.6);
		// }
		// 50%{
		// 	transform: scale(1.2);
		// }
		// 100%{
		// 	transform: scale(.6);
		// }
		0% {
			transform: translateX(0);
		}

		50% {
			transform: translateX(180px);
		}

		100% {
			transform: translateX(0);
		}
	}

	.top-content {
		position: relative;
		background: linear-gradient(to left, #46b361, #8dbc6a);
		height: 320rpx;
		margin-bottom: 20rpx;

		.info {
			padding: 50rpx;
			justify-content: space-between;

			.left {
				font-size: 7vw;
				text-shadow: 3px 2px 4px #333333;


			}

			.right {}
		}
	}

	.order {
		padding: 0 30rpx;

		.order-item {
			padding: 10rpx 30rpx;
			margin-top: 20rpx;

			.item {
				padding: 10rpx 0;
			}

			.btn {
				.saveBtn {
					width: 140rpx;
					height: 45rpx;
					line-height: 42rpx;
					font-size: 26rpx;
				}
			}
		}

	}

	.box_star {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		padding: 51rpx 0 30rpx 0;

		.close {
			position: absolute;
			right: 0;
			top: 0;
			width: 80rpx;
			height: 80rpx;
		}

		.input-num {
			margin-top: 20rpx;
			height: 70rpx;
			border: 1px dashed #44b360;
		}

		.star {
			margin-top: 22rpx;
		}

		.saveBtn {
			width: 160rpx;
			height: 60rpx;
			font-size: 22rpx;
			margin-top: 22rpx;
		}
	}

	.wave {
		width: 100%;
		height: 45rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background: url();
		background-size: 700rpx 45rpx;
	}

	.wave1 {
		z-index: 4;
		animation: animate1 20s linear infinite;
	}

	.wave2 {
		bottom: 4rpx;
		opacity: .5;
		z-index: 3;
		animation: animate2 14s linear infinite;
	}

	.wave3 {
		bottom: 10rpx;
		opacity: .2;
		z-index: 2;
		animation: animate1 10s linear infinite;
	}

	.wave4 {
		z-index: 1;
		bottom: 14rpx;
		opacity: .71;
		animation: animate2 7s linear infinite;
	}

	@keyframes animate1 {
		0% {
			background-position-x: 0;
		}

		100% {
			background-position-x: 740rpx;
		}

	}

	@keyframes animate2 {
		0% {
			background-position-x: 0;
		}

		100% {
			background-position-x: -700rpx;
		}

	}
</style>